import React from 'react'
import { Button,Card,Radio } from "antd";
import './ui.less'
// Buttons
export default class Buttons extends React.Component{
    constructor(){
        super()
        this.state={
            loading:true,
            size:"default"
        }
    }
    //关闭loading
    closeLoding = () =>{
        this.setState({
            loading: false
        })
    }
    //改变按钮大小
    change = (e) =>{
        this.setState({
            size:e.target.value
        })
    }
    render(){
        return(
            <div>
                <Card title="基础按钮" className="cardbox">
                    <Button type="primary">按钮</Button>
                    <Button>按钮</Button>
                    <Button type="dashed">按钮</Button>
                    <Button type="danger">按钮</Button>
                    <Button disabled>按钮</Button>
                </Card>

                <Card title="图形按钮" className="cardbox">
                    <Button icon="plus">创建</Button>
                    <Button icon="add">编辑</Button>
                    <Button icon="delete">删除</Button>
                    <Button shape="circle" icon="search"></Button>
                    <Button type="primary" icon="search">搜索</Button>
                    <Button type="primary" icon="download">下载</Button>
                </Card>

                <Card title="Loading按钮" className="cardbox">
                    <Button icon="plus" loading={this.state.loading}>创建</Button>
                    <Button icon="add" shape="circle" loading={this.state.loading}></Button>
                    <Button icon="delete" loading={this.state.loading}>点击加载</Button>
                    <Button type="primary" onClick={this.closeLoding}>关闭</Button>
                </Card>

                <Card title="按钮组" className="cardbox">
                    <Button.Group>
                        <Button type="primary" icon="left">后退</Button>
                        <Button type="primary" icon="right">前进</Button>
                    </Button.Group>
                </Card>

                <Card title="按钮大小" className="cardbox">
                    <Radio.Group value={this.state.size} onChange={this.change} >
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                    <Button type="primary" size={this.state.size}>按钮</Button>
                    <Button size={this.state.size}>按钮</Button>
                    <Button type="dashed" size={this.state.size}>按钮</Button>
                    <Button type="danger" size={this.state.size}>按钮</Button>
                    <Button disabled size={this.state.size}>按钮</Button>
                </Card>
            </div>
        )
    }
}